<!-- 分红明细 -->
<template>
	<view class="return-com" :style="{ '--color': vuex_config.themeColor1, '--price': vuex_config.price }">
		<return-view :dataList="dataList"></return-view>
		<sww-load-more :params="dataListParams" @load="loadMore"></sww-load-more>
	</view>
</template>

<script>
	import {
		pagingMixin
	} from '@/mixins/pagingMixin.js';
	import {
		mapState
	} from 'vuex';
	import returnView from '../../components/returnView.vue'
	export default {
		mixins: [pagingMixin],
		components:{
			returnView
		},
		data() {
			return {
			};
		},
		onLoad: function() {
			//TODO
			this.initPage();
		},
		onReachBottom: function() {
			this.loadMore();
		},

		computed: {
			...mapState(['vuex_count']),
		},

		methods: {
			// 顶部导航切换
			subChange() {
				this.initPage();
			},
			// 初始化页面
			initPage() {
				this._init_data('GetUsersCommission', {

					status: 4
				});
			},
			// 触发分页
			loadMore() {
				this._load_data();
			},

		}
	};
</script>
<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.subsection {
		display: flex;
		height: 60rpx;
		padding: 10rpx 30rpx 20rpx;
		background-color: #fff;
	}

	.subsection-item {
		flex: 1;
		height: 60rpx;
		border: 1rpx solid var(--color);
		border-right: 0;
		text-align: center;
		line-height: 60rpx;
		color: var(--color);
	}

	.subsection-item-color {
		border: 0;
		background-color: var(--color);
		color: #fff;
	}

	.subsection-item:nth-last-child(1) {
		border: 1rpx solid var(--color);
		border-radius: 0px 8rpx 8rpx 0px;
	}

	.subsection .subsection-item:nth-child(1) {
		border: 1rpx solid var(--color);
		border-right: 0;
		border-radius: 8rpx 0px 0px 8rpx;
	}

	.return-com-detailed {
		display: flex;
		flex-wrap: wrap;
		background: #fff;
		padding: 24rpx 30rpx 4rpx;
		margin-bottom: 14rpx;

		.com-item {
			display: flex;
			width: 50%;
			align-items: center;
			// margin-right: 20rpx;
			margin-bottom: 15rpx;

			.com-title {
				color: var(--price);
				font-size: 26rpx;
				margin-left: 10rpx;
			}
		}
	}

</style>
